<template>
  <div class="login">
    <header>
      <div class="top"><p class="tab" @click="jump"></p></div>
      <div class="title">
        <img
          src="https://z3.ax1x.com/2021/07/20/WNePaR.png"
          alt=""
          class="logo"
        /><span>验证码登录</span>
      </div>
    </header>
    <main>
      <van-config-provider :theme-vars="themeVars" class="form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              @focus="onFocus(0)"
              @blur="onBlur(0)"
              v-model="state.tell"
              type="tel"
              name="tell"
              label="+86"
              placeholder="请输入手机号"
              :rules="[
                {
                  required: true,
                  message: '请输入11位手机号',
                  trigger: 'onChange',
                  pattern: /^1[3,5,7,8,9][0-9]{9}$/,
                },
              ]"
            />
            <van-field
              v-model="state.password"
              center
              clearable
              placeholder="请输入验证码"
              validate-trigger="onChange"
              @focus="onFocus(1)"
              @blur="onBlur(1)"
              type="password"
              :rules="[{ pattern: /^[0-9]{6}$/ }]"
            >
              <template #button>
                <van-button size="small" type="primary">获取验证码</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 30px">
            <van-button round block type="primary" class="btn" @click="req">
              登录
            </van-button>
          </div>
        </van-form>
      </van-config-provider>
      <p class="sign">使用密码登录</p>
      <div class="pass">
        <div class="img">
          <img src="https://z3.ax1x.com/2021/07/20/Wt9fWd.png" alt="" />
        </div>
        <div class="smallsign">免验证登录</div>
      </div>
    </main>
    <footer>
      <van-checkbox v-model="checked" class="bottom">
        <span>登录即表示同意</span>
        <a>用户协议</a>
        <span>和</span>
        <a>隐私权政策</a>
      </van-checkbox>
    </footer>
    <van-field
      v-if="flag"
      readonly
      clickable
      @input="onInput"
      :sign="value"
      @delete="onDelete"
      class="oop"
    />
    <van-number-keyboard
      :show="flag"
      @input="onInput"
      :sign="value"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { reactive, ref, onBeforeMount } from "vue";
import { Toast } from "vant";
import { postloginApi } from "@/utils/api.js";
export default {
  setup() {
    const flag = ref(false);
    const value = ref("");
    const checked = ref(false);
    const num = reactive({
      arr: [],
    });
    const sign = ref("1");
    const state = reactive({
      tell: "",
      password: "",
    });
    onBeforeMount(() => {
      sessionStorage.setItem("keytwo", "");
      sessionStorage.setItem("keyone", "");
    });
    const themeVars = {
      buttonPrimaryBackgroundColor: "#A8D5FB",
      buttonPrimaryBorderColor: "#A8D5FB",
      buttonDefaultHeight: 50 + "px",
      buttonNormalFontSize: 16 + "px",
    };
    const onFocus = (e) => {
      flag.value = true;
      if (e == 0) {
        if (sessionStorage.getItem("keyone")) {
          num.arr.push(sessionStorage.getItem("keyone"));
          state.tell = sessionStorage.getItem("keyone");
        } else {
          sessionStorage.setItem("keyone", "");
        }
        sign.value = 1;
      } else {
        if (sessionStorage.getItem("keytwo")) {
          num.arr.push(sessionStorage.getItem("keytwo"));
          state.password = sessionStorage.getItem("keytwo");
        } else {
          sessionStorage.setItem("keytwo", "");
        }
        sign.value = 2;
      }
      document.onkeydown = () => {
        return false;
      };
    };
    const onBlur = (e) => {
      value.value = "";
      flag.value = false;
      num.arr = [];
      if (e == 0) {
        state.tell = sessionStorage.getItem("keyone");
      } else {
        state.password = sessionStorage.getItem("keytwo");
      }
    };
    const onInput = (e) => {
      let one;
      if (sign.value == 1) {
        one = "keyone";
        if (sessionStorage.getItem(one).split("").length < 11) {
          num.arr.push(e);
        }
      } else {
        one = "keytwo";
        if (sessionStorage.getItem(one).split("").length < 6) {
          num.arr.push(e);
        }
      }
      sessionStorage.setItem(one, num.arr.join(""));
      one == "keyone"
        ? (state.tell = sessionStorage.getItem(one))
        : (state.password = sessionStorage.getItem(one));
      value.value = num.arr.join("");
    };
    const onDelete = () => {
      let one;
      if (sign.value == 1) {
        one = "keyone";
      } else {
        one = "keytwo";
      }
      num.arr = sessionStorage.getItem(one).split("");
      num.arr.pop();
      sessionStorage.setItem(one, num.arr.join(""));
      one == "keyone"
        ? (state.tell = sessionStorage.getItem(one))
        : (state.password = sessionStorage.getItem(one));
      value.value = num.arr.join("");
    };
    const change = (e) => {
      if (e == 0) {
        state.tell = sessionStorage.getItem("keyone");
      } else {
        state.password = sessionStorage.getItem("keytwo");
      }
    };
    const req = () => {
      let tell = sessionStorage.getItem("keyone");
      let password = sessionStorage.getItem("keytwo");
      if (checked.value) {
        if (tell.split("").length == 11) {
          if (password.split("").length == 6) {
            postloginApi({ tell, password }).then((res) => {
              if (res.status == 0) {
                sessionStorage.setItem("sign", tell);
                location.hash = sessionStorage.getItem("router") || "#/home";
              } else {
                Toast(res.msg);
              }
            });
          } else {
            Toast("验证码长度不正确");
          }
        } else {
          Toast("手机号格式不正确");
        }
      } else {
        Toast("请阅读后勾选用户隐私协议!");
      }
    };
    const jump = () => {
      if (sessionStorage.getItem("router") == "#/quick") {
        location.hash = "#/home";
      } else {
        location.hash = "#/home/mine";
      }
    };
    return {
      state,
      themeVars,
      onFocus,
      flag,
      onBlur,
      value,
      num,
      onInput,
      onDelete,
      sign,
      change,
      req,
      onBeforeMount,
      checked,
      jump,
    };
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: PingFang SC;
  background: #fff;
  position: relative;
}
header {
  height: 20%;
  width: 100%;
  padding: 0 20px;
}
main {
  height: 70%;
  width: 100%;
}
footer {
  height: 10%;
  width: 100%;
  display: flex;
  align-items: center;
}
#app {
  width: 100%;
  height: 100%;
}
.logo {
  width: 25px;
  height: 22px;
  margin-right: 10px;
}
.van-cell__title::after {
  content: "";
  width: 5px;
  height: 5px;
  border-bottom: #666666 solid 1px;
  border-left: #666666 solid 1px;
  position: absolute;
  left: 50px;
  bottom: 20px;
  transform: rotate(-45deg);
}

.oop {
  position: absolute;
  left: 0;
  bottom: 0;
}
.title {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
  color: #333333;
}
.form {
  width: 100%;
}
.btn {
  margin-top: 15%;
}
.tab {
  width: 12px;
  height: 12px;
  border-top: #666666 solid 2px;
  border-left: #666666 solid 2px;
  transform: rotate(-45deg);
}
.top {
  height: 40%;
  background: #fff;
  font-size: 18px;
  width: 100%;
  display: flex;
  align-items: center;
}
.sign {
  font-size: 14px;
  font-weight: bold;
  color: #429af3;
  width: 100%;
  text-align: center;
  margin-bottom: 18%;
}
.img {
  width: 100%;
  display: flex;
  justify-content: center;
}
img {
  width: 42px;
  height: 100%;
}
.smallsign {
  font-size: 10px;
  font-weight: bold;
  color: #999999;
  width: 100%;
  text-align: center;
  margin-top: 5px;
}
.pass {
  width: 100%;
}
.bottom {
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: #666666;
  align-items: center;
}
a {
  color: #429af3;
}
.van-field__error-message {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
